<template>
  <div class="box">
    <h1>B组件组件,{{ count.num }} --- {{ count.double }}</h1>
    <van-button type="primary" @click="count.num--">-</van-button>
    <van-button type="primary" @click="handleNum">$path修改</van-button>
    <van-button type="primary" @click="handleBanner">新增轮播</van-button>
  </div>
</template>

<script setup lang="ts">
import { useBanner } from "../../store/banner";
import { useCounter } from "../../store/count";
const count = useCounter();
const handleNum = () => {
  count.$patch({
    num: 666,
  });
};

const banner = useBanner();
const handleBanner = () => {
  // 方法1:直接修改
  // banner.list.push({
  //   objectId: Math.random() + "",
  //   url: "asdfasdf",
  //   name: "新轮播",
  // });
  // 方法2：调用同步action
  banner.bannerAdd({
    objectId: Math.random() + "",
    url: "asdfasdf",
    name: "新轮播",
  });
};
</script>

<style scoped>
.box {
  width: 50%;
  height: 500px;
  border: 1px solid #333;
  float: left;
  box-sizing: border-box;
}
</style>
